import logo from "@/common/img/logo.svg";
import { Link, useLocation } from "umi";
import IconMap from "./IconMap";
import { cn } from "@/utils/twMerge";
const routeList = JSON.parse(sessionStorage.getItem("routeList") || "[]");
//不知道为什么这样会闪烁
const SiderBar = (props: any) => {
  const location = useLocation();
  const { collapse, Sider, Menu } = props;

  const list = routeList.map((r: any) => ({
    label: <Link to={r.path}>{r.name}</Link>,
    key: r.path,
    icon: IconMap[r.icon],
  }));

  return (
    <Sider width="256" theme="light" collapsed={collapse}>
      <div className="h-16 shadow-sm flex justify-center items-center gap-5 z-10">
        <img src={logo} alt="" className="w-10" />

        <span
          className={cn(
            "font-bold text-lg bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent  ",
            collapse && "hidden"
          )}
        >
          OA系统
        </span>
      </div>
      {/* 菜单 */}
      <div className="h-[calc(100%_-_4rem)]   overflow-auto pt-7">
        <Menu
          selectedKeys={[location.pathname]}
          style={{ width: collapse ? 80 : 256 }}
          mode="inline"
          className="sider-menu"
          items={list}
        ></Menu>
      </div>
    </Sider>
  );
};

export default SiderBar;
